[HTML] 라디오 버튼(radio button) 만들기, 선택방법

홈페이지를 구축시 입력폼에 자주 사용되는 라디오 버튼에 대하여 알아보고 만드는 방법을 함께 알아봅니다. 먼저 라디오 버튼은 어떻게 생겼을까요? 아래에서 자세히 알아보세요.

# 웹사이트 구축시 입력폼 라디오 버튼이란, Radio button

라디오 버튼은 동그란원 모양이마 선택 가능한 인터페이스를 가지고 있습니다. 방문자에게 입력값을 받기 위해서 웹사이트에 많이 사용됩니다. 쉽게는 연락하기 페이지나 관리자 페이지 등에서 쉽게 볼 수 있습니다. 어떻게 생겼는지는 아래의 이미지를 참고하세요. 이처럼 선택하는 버튼을 보신적 있으실겁니다.

스크린샷) 사과와 바나나를 선택 가능하도록 라디오 버튼 사용

바로 위의 이미지 처럼 몇 가지 값들 중 하나를 선택할 경우에 자주 사용되는 입력 양식 중 하나가 바로 라디오 버튼입니다. 라디오 버튼은 다음과 같은 특징이 있죠.

! 라디오 버튼(Radio button) 사용방법

라디오 버튼은 input 태그의 type속성을 이용하며 해당 값에 radio를 입력합니다.

여기서 checked는 페이지를 열었을때 기본값(Default)으로 보여지게 될 값을 의미합니다.

! 라디오 버튼(Radio button) 특징

라디오 버튼은 몇 가지 선택가능한 값들 중에서 딱 하나만 선택이 가능하다는 특징이 있습니다. 그래서 중복선택이 불가능하죠... 중복선택이 불가능한 값이 뭐가 있을까요? 예를 들어 남자 또는 여자, 18세 이상 또는 18세 미만등 중간 값이 없는 경우 사용하면 유용할 것입니다... 만약에 중복 선택이 가능하길 원하신다면 체크박스폼을 이용하시는게 좋습니다.

체크박스 사용하는 방법 바로가기 >
http://webisfree.com/2016-05-14/[javascript]-input-태그의-체크여부-확인하기-체크값-불러오기

# 라디오 버튼(Radio button) 예제보기

만약 방문자에게 사과 또는 바나나 둘 중에 원하는 값을 하나 선택하게 하려는 경우 아래와 같이 작성해 사용이 가능합니다.

위 코드를 입력해 브라우저에서 보게되면 아래와 같이 실행됩니다.
사과
바나나

이제 위 버튼을 클릭해보세요. 선택이 가능하며 페이지가 로딩되면 사과가 기본적으로 체크되어 있음을 확인할 수 있습니다.

! 텍스트를 클릭해도 선택이 되게 하는 방법

만약 라디오 버튼이 아닌 텍스를 선택해도 클릭되게 하려면 어떻게 할까요? 아래 링크에 자세히 나와있습니다.
https://webisfree.com/2017-01-10/label-태그를-사용하는-다양한-방법